import React, { FC } from 'react'
import { t } from 'i18next'
import styled from 'styled-components'
import {
	IconMoveTop,
	IconMoveUp,
	IconMoveDown,
	IconMoveBottom,
	IconMoveTopDisabled,
	IconMoveUpDisabled,
	IconMoveDownDisabled,
	IconMoveBottomDisabled,
	IconShow,
	IconRollCalleeUp,
	IconRollCalleeUpDisabled,
	IconRollCalleeDown,
	IconRollCalleeDownDisabled,
	IconCloseShow,
} from './style'
import { useGlobalStore } from '@/store/global'
import useLock from '@/hooks/useLock'
export type ActionType = 'top' | 'up' | 'down' | 'bottom' | 'roll-callee-up' | 'roll-callee-next' | 'show'
export interface ListBodyProps {
	isHideOrder?: boolean
	order?: (type: ActionType) => void
	disabledUp?: boolean
	disabledDown?: boolean
	disabled: boolean
	open: boolean
	_height?: number
	disabledCallPre?: boolean
	disabledCallNext?: boolean
}
const Wrap = styled.div<{
	height: number
}>`
	height: ${(props) => {
		const _height = `${props.height}px`
		return `calc(100% - ${_height})`
	}};
	position: relative;
	.list-body__bts {
		position: absolute;
		right: 0px;
		height: 100%;
		display: flex;
		flex-direction: column;
		li {
			width: 31px;
			height: 30px;
		}
		.rc-show {
			position: absolute;
			top: -40px;
		}
		.roll-prev {
			margin-top: 15px;
			margin-bottom: 10px;
		}
		.roll-next {
			margin-bottom: 25px;
		}
		.roll-top,
		.roll-up,
		.roll-down {
			margin-bottom: 10px;
		}
	}
`
export const ListBody: FC<ListBodyProps> = (props) => {
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const callPre = useLock(
		async () => {
			!props.disabledCallPre && props.order?.('roll-callee-up')
		},
		1000,
		true
	)
	const callnext = useLock(
		async () => {
			!props.disabledCallNext && props.order?.('roll-callee-next')
		},
		1000,
		true
	)
	return (
		<Wrap height={props._height || 45}>
			{props.children}
			{!props.isHideOrder && (
				<ul className="list-body__bts">
					{!!SWITCH.monitor && (
						<li className="rc-show" title={t('查看会场图像')} onClick={() => props.order?.('show')}>
							{props.open ? <IconShow /> : <IconCloseShow />}
						</li>
					)}
					<li className="roll-prev" title={t('点名上一个')} onClick={callPre}>
						{!props.disabledCallPre ? <IconRollCalleeUp /> : <IconRollCalleeUpDisabled />}
					</li>
					<li className="roll-next" title={t('点名下一个')} onClick={callnext}>
						{!props.disabledCallNext ? <IconRollCalleeDown /> : <IconRollCalleeDownDisabled />}
					</li>
					<li
						className="roll-top"
						title={t('上移到顶部')}
						onClick={() => !props.disabledUp && props.order?.('top')}
					>
						{!props.disabledUp ? <IconMoveTop /> : <IconMoveTopDisabled />}
					</li>
					<li className="roll-up" title={t('上移')} onClick={() => !props.disabledUp && props.order?.('up')}>
						{!props.disabledUp ? <IconMoveUp /> : <IconMoveUpDisabled />}
					</li>
					<li
						className="roll-down"
						title={t('下移')}
						onClick={() => !props.disabledDown && props.order?.('down')}
					>
						{!props.disabledDown ? <IconMoveDown /> : <IconMoveDownDisabled />}
					</li>
					<li
						className="roll-bottom"
						title={t('下移到底部')}
						onClick={() => !props.disabledDown && props.order?.('bottom')}
					>
						{!props.disabledDown ? <IconMoveBottom /> : <IconMoveBottomDisabled />}
					</li>
				</ul>
			)}
		</Wrap>
	)
}
